﻿@model Com.ProjectA.FAMvc.Areas.admin.Models.PedigreeModel
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Index</h2>
<div id='notify'>
    <p>@Model.messageNotify</p>
</div>
@Model.pedigree
@*@Html.Hidden("perCdTemp");*@
<div id='cssmenu'>
    <ul>
       <li id="detail"><a name="menu" href='#'><span>Detail</span></a></li>
       <li class='has-sub'><a name="menu" href='#'><span>Add sibling</span></a>
          <ul>
             <li id="olderSibling"><a name="menu" href='#'><span>Older</span></a></li>
             <li id="youngerSibling" class='last'><a name="menu" href='#'><span>Younger</span></a></li>
          </ul>
       </li>
       <li class='has-sub last'><a name="menu" href='#'><span>Add descendant</span></a>
          <ul>
             <li id="olderDescendant"><a name="menu" href='#'><span>Older</span></a></li>
             <li id="youngerDescendant" class='last'><a name="menu" href='#'><span>Younger</span></a></li>
          </ul>
       </li>
    </ul>
</div>
<div id="dialog-form">
    @*<p class="validateTips">All form fields are required.</p>
  <form>
      <fieldset class="createForm">
        <label for="first_name" class="createForm">First Name</label>
        <input type="text" name="first_name" id="first_name" class="createForm text ui-widget-content ui-corner-all" />
        <label for="middle_name" class="createForm">Middle Name</label>
        <input type="text" name="middle_name" id="middle_name" class="createForm text ui-widget-content ui-corner-all" />
        <label for="last_name" class="createForm">Last Name</label>
        <input type="text" name="last_name" id="last_name" value="" class="createForm text ui-widget-content ui-corner-all" />
        <label for="birthday" class="createForm">Birthday</label>
        <input type="text" name="birthday" id="birthday" value="" class="createForm text ui-widget-content ui-corner-all" />
        <label for="deathday" class="createForm">Deathday</label>
        <input type="text" name="deathday" id="deathday" value="" class="createForm text ui-widget-content ui-corner-all" />
        <label for="number_children" class="createForm">Number Of Children</label>
        <input type="text" name="number_children" id="number_children" value="" class="createForm text ui-widget-content ui-corner-all" />
        <label for="sex" class="createForm">Gender</label>
        <input type="radio" name="sex" value="Y" checked="checked" class="createForm text ui-widget-content ui-corner-all"/>Male<br />
        <input type="radio" name="sex" value="N" class="createForm text ui-widget-content ui-corner-all"/>Female<br />
        <label for="person_status" class="createForm">Status</label>
        <input type="checkbox" name="person_status" id="person_status" value="" checked="checked" class="createForm text ui-widget-content ui-corner-all" />

      </fieldset>
  </form>*@
</div>

@section Scripts {
    <script type="text/javascript">
        $(document).ready(function () {
            // Begin handling for menu
            $("#cssmenu").hide();
            $("a[name!='menu']").contextMenu('cssmenu', {

                bindings: {

                    'detail': function (t) {
                        $("#dialog-form").data("perCdTemp", t.name).dialog("open");
                        $("#dialog-form").dialog("option", "title", "Detail");
                        
                        $("#dialog-form").dialog("option", "buttons", [{ text: "Nut nay chua active, bam nut save thay the", click: function () {
                            var bValid = true;
                            var submitForm = function (isValid) {
                                if (isValid) {
                                    $("#person_code").prop("disabled", false);
                                    $("#formDetail").submit();
                                }
                            };
                            var first_name = $("#first_name"),
                                            middle_name = $("#middle_name"),
                                            last_name = $("#last_name"),
                                            birthday = $("#birthday"),
                                            death_day = $("#death_day"),
                                            number_children = $("#number_children"),
                                            allFields = $([]).add(first_name).add(middle_name).add(last_name).add(birthday).add(death_day).add(number_children),
                                            tips = $(".validateTips");

                            function updateTips(t) {
                                tips.text(t).addClass("ui-state-highlight");
                                setTimeout(function () {
                                    tips.removeClass("ui-state-highlight", 1500);
                                }, 500);
                            }

                            function checkLength(o, n, min, max) {
                                if (o.val().length > max || o.val().length < min) {
                                    o.addClass("ui-state-error");
                                    updateTips("Length of " + n + " must be between " +
                                    min + " and " + max + ".");
                                    return false;
                                } else {
                                    return true;
                                }
                            }

                            function checkRegexp(o, regexp, n) {
                                if (!(regexp.test(o.val()))) {
                                    o.addClass("ui-state-error");
                                    updateTips(n);
                                    return false;
                                } else {
                                    return true;
                                }
                            }
                            allFields.removeClass("ui-state-error");

                            bValid = bValid && checkLength(first_name, "First Name", 2, 200);
                            bValid = bValid && checkLength(middle_name, "Middle Name", 2, 200);
                            bValid = bValid && checkLength(last_name, "Last Name", 2, 200);
                            bValid = bValid && checkLength(birthday, "Birthday", 10, 10);
                            bValid = bValid && checkLength(death_day, "Death day", 10, 10);
                            bValid = bValid && checkLength(number_children, "Number of children", 1, 999);
                            bValid = bValid && checkRegexp(first_name, /^[a-zA-Z]+$/i, "First name may consist of a-z, A-Z.");
                            bValid = bValid && checkRegexp(middle_name, /^[a-zA-Z]+$/i, "Middle name may consist of a-z, A-Z.");
                            bValid = bValid && checkRegexp(last_name, /^[a-zA-Z]+$/i, "Last name may consist of a-z, A-Z.");
                            bValid = bValid && checkRegexp(birthday, /^\d{2}\/\d{2}\/\d{4}|\d{2}-\d{2}-\d{4}$/, "Birthday field must have format: dd/mm/yyyy or dd-mm-yyyy");
                            bValid = bValid && checkRegexp(death_day, /^\d{2}\/\d{2}\/\d{4}|\d{2}-\d{2}-\d{4}$/, "Death day field must have format: dd/mm/yyyy or dd-mm-yyyy");
                            bValid = bValid && checkRegexp(number_children, /^[0-9]+$/i, "Number of children may consist of 0 - 9");

                            if (bValid) {
                                $("#notify").html("Create OK");
                                submitForm(bValid);
                                $(this).dialog("close");
                            }
                            $("#notify").html("Create OK");
                        }
                        }, { text: "Cancel", click: function () {
                            $(this).dialog("close");
                        }
                        }
                        ]);
                    },

                    'youngerSibling': function (t) {

                        alert('Trigger was ' + t.name + '\nAction was younger sibling');

                    },

                    'olderSibling': function (t) {

                        alert('Trigger was ' + t.id + '\nAction was older sibling');

                    },

                    'youngerDescendant': function (t) {

                        alert('Trigger was ' + t.id + '\nAction was younger descendant');

                    },

                    'olderDescendant': function (t) {

                        alert('Trigger was ' + t.id + '\nAction was older descendant');

                    }
                }

            });

            // End handling for menu

            // Begin definition for dialog
            $("#dialog-form").dialog({
                title: "X",
                autoOpen: false,
                height: 500,
                width: 650,
                modal: true,
                open: function (event, ui) {
                    //alert($("#perCdTemp").val());
                    //alert($(this).data('perCdTemp'));
                    var url = '@Url.Action("Detail", "MemMgn")';
                    url = url + '/' + $(this).data('perCdTemp');
                    //alert(url);
                    $(this).load(url);
                    //                    var messageNotify = $("#notify");
                    //                    $.ajax({
                    //                        url: url,
                    //                        type: "get",
                    //                        contentType: "html",
                    //                        error: function () {
                    //                            messageNotify.html("<p>Page Not Found!!</p>");
                    //                        },
                    //                        beforeSend: function () {
                    //                        },
                    //                        complete: function () {
                    //                        },
                    //                        success: function (strData) {
                    //                            //alert(strData);
                    //                            $(this).load(strData);
                    //                        }
                    //                    });
                },
                buttons: {

                },
                close: function () {
                    //allFields.val("").removeClass("ui-state-error");
                }
            });
            // End definition for dialog

            // Begin paging for pedigree. Max generation depth is 10
            $("a[name!='menu']").click(function () {
                //alert($(this).attr('name'));
                //$("#perCdTemp").val($(this).attr('name'));
                //$("#dialog-form").data("perCdTemp", $(this).attr("name")).dialog("open");
                var person_id = $(this).attr("name");
                var urlAction = '@Url.Action("Index", "MemMgn", new {id = "__id__"})';
                window.location.href = urlAction.replace("__id__", person_id);
            });
            // End paging for pedigree. Max generation depth is 10
        });

        (function ($) {
            $(window).load(function () {
                var totalScrollOffsetH = $(".totalScrollOffset").height();
                $("#divPedigree").mCustomScrollbar({
                    verticalScroll: true,
                    horizontalScroll: true,
                    mouseWheel: true,
                    autoDraggerLength: true,
                    scrollButtons: {
                        enable: true
                    },
                    callbacks: {
                        onTotalScroll: function () {
                            appendTextOnTotalScroll();
                        },
                        onTotalScrollOffset: totalScrollOffsetH
                    }
                });
                /*$("#scroll_to_bottom").click(function (e) {
                e.preventDefault();
                $("#content_2").mCustomScrollbar("scrollTo", "bottom");
                });*/
                function appendTextOnTotalScroll() {
                    var c = $("#divPedigree").find(".mCSB_container p:last");
                    //var h = "<p>Consectetur adipiscing elit. Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adipiscing dui eu metus gravida vel facilisis ligula iaculis. Cras a rhoncus massa. Donec sed purus eget nunc placerat consequat. <strong>Appended text end.</strong></p>";
                    //c.after(h);
                    $("#divPedigree").mCustomScrollbar("update");
                }
            });
        })(jQuery);
    </script>
}